<template>
  <div id="panelHeader">
    <el-row class="row">
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <img
            class="back verticalM"
            @click="back"
            src="../../assets/images/panel/back.png"
            alt=""
          />
          <span class="title verticalM">{{ title }}</span>
          <span class="verticalM">/</span>
          <span class="operation verticalM">{{ operation }}</span>
          <el-select
            size="medium"
            v-model="selectChart"
            @change="selectChartHandle"
            placeholder="请选择 Chart"
            clearable
            @clear="selectChartHandle('add')"
            class="verticalM"
          >
            <el-option
              v-for="item in panelCharts"
              :key="item.chartId"
              :label="item.chartName"
              :value="item.chartId"
            >
            </el-option>
          </el-select>
          <el-button v-if="operation == '编辑'" size="medium" type="danger" icon="el-icon-delete" @click="delChart">删除图表</el-button>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple bg-purple-light">
          <el-button type="primary" plain @click="cancel">取消</el-button>
          <el-button type="primary" class="" @click="save">保存</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>

export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    operation: {
      type: String,
      default: "添加",
    },
    panelCharts: {
      type: Array,
      default: () => [],
    },
  },
  components: {},
  data() {
    return {
      selectChart: undefined,
    };
  },
  created() {},
  methods: {
    back() {
      this.$router.back();
    },
    cancel() {
      this.$router.back();
    },
    save() {
      this.$emit("saveHandle");
    },
    selectChartHandle(chartId) {
      this.$emit("selectChartHandle", chartId);
    },
    delChart(){
      this.$emit("delChart",this.selectChart);
      this.selectChart = undefined;
      this.selectChartHandle("add");
    }
  },
};
</script>
<style lang="less" scoped>
#panelHeader {
  padding-top: 12px;
}
.row {
  display: flex;
  align-items: center;
}
.bg-purple {
  font-size: 0.35rem;
  color: #44dfff;
  .back {
    width: 0.4rem;
  }
  .verticalM {
    vertical-align: middle;
    margin-right: 10px;
  }
}
.bg-purple-light {
  display: flex;
  justify-content: flex-end;

  button {
    font-size: 0.25rem;
  }
}
@media screen and (max-width: 1280px) {
  .bg-purple {
    font-size: 1.2rem;
    .back {
      width: 1rem;
    }
  }
}
</style>
